﻿@model RA_WebSite.Models.Provino
 
@{
    ViewBag.Title = "Crea provino";
}


<h2 class="titoloSezione">Crea un nuovo provino</h2>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Provino</legend>

        <div class="titolino">
            Step numero:
        </div>

        <div class="editor-field">
            @ViewBag.StepSelezionatoID
            <input name="Step_Id" type="hidden" value=@ViewBag.StepSelezionatoID  />
        </div>
        
        <div class="titolino">
            Seleziona il provino:
        </div>
        
        
             <img src='@Url.Action("getImg", "Step", new { id = ViewBag.StepSelezionatoID })' id="target" />    

@*        <div class="inline-labels">
            <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
            <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
            <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
            <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
            <label>W <input type="text" size="4" id="w" name="w" /></label>
            <label>H <input type="text" size="4" id="h" name="h" /></label>
        </div>*@

            <input type="text" name="Coordinate" id="Coordinate" hidden="true"/>
        <p>
            <input type="submit" value="Conferma" id="bottoneCrea2" disabled="disabled"/>
            
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Annulla", "ListaProviniStep", new { id = ViewBag.StepSelezionatoID })
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script type="text/javascript">

    jQuery(function ($) {
        var jcrop_api;

        $('#target').Jcrop({
                onChange: showCoords,
                onSelect: showCoords,
                onRelease: clearCoords
            }, function () {
                jcrop_api = this;
            });

        $('#coords').on('change', 'input', function (e) {
            var x1 = $('#x1').val(),
                x2 = $('#x2').val(),
                y1 = $('#y1').val(),
                y2 = $('#y2').val();
            jcrop_api.setSelect([x1, y1, x2, y2]);
        });

    });

    // Simple event handler, called from onChange and onSelect
    // event handlers, as per the Jcrop invocation above
    function showCoords(c) {
        $('#x1').val(c.x);
        $('#y1').val(c.y);
        $('#x2').val(c.x2);
        $('#y2').val(c.y2);
        $('#w').val(c.w);
        $('#h').val(c.h);
        $('#Coordinate').val(c.x + " " + c.y + " " + c.x2 + " " + c.y2);
       
        if (c.x + c.y + c.x2 + c.y2 != 0) {
            $("#bottoneCrea2").removeAttr("disabled");
        }
        

    };

    function clearCoords() {
        $('#coords input').val('');
    };
    
 
 
</script>
